<template>
  <div class="container">
    <swiper :options="swiperOption" class="swiper" ref="swiper">
      <swiper-slide>
        <first-page />
      </swiper-slide>
      <swiper-slide class="swiper-slide">
        <second-page />
      </swiper-slide>
      <swiper-slide class="swiper-slide">
        <div class="page">3</div>
      </swiper-slide>
      <swiper-slide class="swiper-slide">
        <div class="page">4</div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import 'swiper/css/swiper.css';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import firstPage from './conponents/firstPage.vue';
import secondPage from './conponents/secondPage.vue';
import * as swiperAnimated from '../../assets/js/swiper.animate1.0.3.min';

// https://github.surmon.me/vue-awesome-swiper/
export default {
  name: 'index',
  components: {
    Swiper,
    SwiperSlide,
    firstPage,
    secondPage
  },
  data() {
    // 年终账单= 页面滑动 + dom动画 + 数据
    return {
      // 初始化参数
      swiperOption: {
        direction: 'vertical', // 垂直切换选项
        autoplay: false, // 是否自动播放
        height: window.innerHeight || document.documentElement.clientHeight, // 高
        width: window.innerWidth || document.documentElement.clientWidth, // 宽
        on: {
          init() {
            swiperAnimated.swiperAnimateCache(this); // 隐藏动画元素
            swiperAnimated.swiperAnimate(this); // 初始化完成开始动画
          },
          // 切换结束时
          slideChangeTransitionEnd() {
            swiperAnimated.swiperAnimate(this); // 每个slide切换结束时也运行当前slide动画
            //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
          }
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods: {
    initSwiper() {
      this.$nextTick(() => {
        // 跳到指定页
        this.swiper.slideTo(0, 0, false);
      });
    }
  },
  mounted() {
    this.initSwiper();
  }
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  .page {
    width: 100%;
    height: 100vh;
    background: antiquewhite;
  }
}
</style>
